<template>
	<s-layout title="鲸囍生活圈" navbar="normal" :bgStyle="{color:'#fff'}">
		<!-- <assNavbar title="标题" /> -->
		<view class="content">
			<view class="shopInfo ss-flex ss-col-top ss-row-between ss-m-50">
				<view class="shopInfo-left">
					<view class="title ss-line-1">{{state.title}}</view>
					<view class="tips">优惠奖励15%</view>
				</view>
				<view class="shopInfo-right">
					<image :src="sheep.$url.cdn(state.img)"  mode="aspectFill"/>
				</view>
			</view>
			<view class="payBox ss-m-50">
				<view class="payBox-jine">金额</view>
				<view class="moneyInput ss-flex ss-col-bottom">
					<view class="moneyInput-icon">￥</view>
					<view class="moneyInput-input ss-flex ">
						<uni-easyinput @input="inputNumber" type="digit" v-model="state.money" :inputBorder="false" placeholder="请输入金额"  />
					</view>
				</view>
				<view class="payBox-tips ss-flex ss-m-t-20">
					<image class="tips-icon" :src="sheep.$url.cdn('/static/icon/youhuiquan.png')" />
					<view class="tips-text ss-m-l-10">暂无可使用抵用券</view>
				</view>
			</view>
			<button class="toPayBtn ss-reset-button" @click="toPlay">去支付</button>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {ref, reactive, computed ,nextTick } from 'vue'
	import { onLoad, onShow, onHide ,onPullDownRefresh} from '@dcloudio/uni-app';
	import assNavbar from '@/components/ass-navbar.vue';
	const state = reactive({
		id:'',
		title:'',
		data:{},
		img:'',
		list:[],
		money:''
	})
	function inputNumber(e){
		if(Number(e)>100000){
			setTimeout(()=>{
				state.money=100000
			},50)
		}
	}
	
	
	onLoad((opt)=>{
		console.log('111',opt)
		if(opt.title){
			state.title = opt.title
		}
		if(opt.img){
			state.img = decodeURIComponent(opt.img)
		}
		if(opt.id){
			state.id = opt.id
		}
	})
	onPullDownRefresh(()=>{
		setTimeout(()=>{
			uni.stopPullDownRefresh()
		})
	})
	async function toPlay(){
		const amountRegex = /^(([1-9]\d*)|0)(\.\d{1,2})?$/;
		if (!amountRegex.test(state.money)) {
			uni.showToast({
				title:'请输入合法的金额，最多保留两位小数',
				icon:'none'
			}) 
			return
		}
		if(state.money==0){
			uni.showToast({
				title:'请输入金额',
				icon:'none'
			})
			return
		}else if(state.money<0.01){
			uni.showToast({
				title:'金额不能低于0.01元',
				icon:'none'
			})
			return
		}else{
			const {data,error}=await sheep.$api.merchant.surprise.shopPay({
				price:state.money,
				store_id:state.id
			})
			if(error==0){
				uni.requestPayment({
				  provider: 'wxpay',
				  ...data,
				  success: (res) => {
					  sheep.$router.redirect('/pages/merchant/surprise/payResult',{
						  price:state.money
					  })
				  },
				  fail: (err) => {
				    if (err.errMsg === 'requestPayment:fail cancel') {
				      sheep.$helper.toast('支付已手动取消');
				    } else {
						uni.showToast({
							title:'支付失败，请重试',
							icon:'none',
							duration:2000
						})
				    }
				  },
				});
			}
		}
		
	}
	
</script>

<style lang="scss" scoped>
	::v-deep{
		.uni-easyinput__content-input{
			font-size: 64rpx;
			font-weight: bold;
			height:80rpx;
			font-family: Source Han Sans;
		}
		.uni-easyinput__placeholder-class{
			font-size: 28rpx;
			color: #A6A6A6;
		}
		.uni-input-wrapper{
			.uni-input-input{
				font-family: Source Han Sans;
				font-size: 72rpx;
				font-weight: bold;
				letter-spacing: normal;
				color: #000000;
			}
		}
	}
	.content{
		.shopInfo{
			.shopInfo-left{
				.title{
					font-family: Source Han Sans;
					font-size: 36rpx;
					font-weight: bold;
					letter-spacing: normal;
					color: #000000;
				}
				.tips{
					font-family: Source Han Sans;
					font-size: 36rpx;
					font-weight: normal;
					letter-spacing: normal;
					color: #A6A6A6;
				}
			}
			.shopInfo-right{
				image{
					width: 156rpx;
					height: 156rpx;
				}
			}
		}
		.payBox{
			.payBox-jine{
				font-family: Source Han Sans;
				font-size: 36rpx;
				font-weight: normal;
				letter-spacing: normal;
				color: #A6A6A6;
			}
			.moneyInput{
				.moneyInput-icon{
					font-family: Source Han Sans;
					font-size: 60rpx;
					font-weight: 500;
					letter-spacing: normal;
					color: #000000;
				}
				.moneyInput-input{
					width: 322rpx;
					height:80rpx;
					border-bottom: 1rpx solid #D8D8D8;
					input{
						// width: 322rpx;
						// font-family: Source Han Sans;
						// font-size: 28rpx;
						// font-weight: normal;
						// line-height: 132.75%;
						// letter-spacing: normal;
						font-family: Source Han Sans;
						font-size: 72rpx;
						font-weight: bold;
						letter-spacing: normal;
						color: #000000;
					}
				}
			}
			.payBox-tips{
				.tips-icon{
					width: 40rpx;
					height: 40rpx;
				}
				.tips-text{
					font-family: Source Han Sans;
					font-size: 28rpx;
					font-weight: normal;
					line-height: normal;
					letter-spacing: normal;
					color: #9E9E9E;
				}
			}
		}
		.toPayBtn{
			margin: 50rpx auto 0;
			width: 650rpx;
			height: 96rpx;
			border-radius: 100rpx;
			background: #F7D142;
			font-family: Source Han Sans;
			font-size: 36rpx;
			font-weight: bold;
			line-height: normal;
			letter-spacing: normal;
			color: #000000;
		}
	}
</style>